<script setup>
import { reactive, ref, watch } from 'vue';

// 1. 响应式数据
const pName = ref('刘德华')
const person = reactive({
  name: '张三',
  age: 18,
  sex: '男'
})

// 2. 侦听器
// 侦听一个响应式数据
// watch(响应式数据, (新值, 旧值)=>{})
// watch(pName, (newValue) => {
//   console.log('姓名变化了', newValue)
// })

// 侦听多个响应式数据
// watch([数据1, 数据2], ([新值数组]) => { }) 
watch([pName, person], (newValue) => {
  console.log(newValue)
})

</script>

<template>
  <div>
    <p>姓名: {{ pName }}</p>
    <button @click="pName = '王菲'">改名字</button>
    <hr>
    <p>姓名: {{ person.name }}, 性别: {{ person.sex }}, 年龄: {{ person.age }}</p>
    <button @click="person.sex = '女'">改名字</button>
  </div>
</template>

<style scoped></style>
